import React, { useState, useEffect } from 'react'
import { View, Button, Image, Text } from '@tarojs/components'
import { AtCard, AtButton, AtDivider, AtMessage } from 'taro-ui'
import Taro from '@tarojs/taro'
import './index.scss'
import EChart from 'techarts'
// 自定义构建的echarts
import * as echarts from '../../echarts'
import { getTagDetailHistory } from '../../../../api/index'

interface Pubdate {
  row: string
  value: number
}

interface TagHistoryDetail {
  v: Array<Pubdate>
  co: Array<Pubdate>
  s: Array<Pubdate>
  d: Array<Pubdate>
  l: Array<Pubdate>
  r: Array<Pubdate>
  c: Array<Pubdate>
}

interface TagHistoryDetailType {
  history: TagHistoryDetail
}

export default (props) => {
  const { id, view, subscribed, count } = props
  const [current, setCurrent] = useState(0)
  const [current_2, setCurrent_2] = useState(0)
  const [detail, setDetail] = useState<any>()
  const [totalData, setTotalData] = useState<TagHistoryDetailType>()
  const [totalData_2, setTotalData_2] = useState<TagHistoryDetailType>()
  const [option, setOption] = useState<any>({
    title: {
      text: '总量显示: 视频数(单位: 亿)',
      left: 'center',
      top: 0
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0],
        type: 'line',
        areaStyle: {}
      }
    ]
  })
  const [option_2, setOption_2] = useState<any>({
    title: {
      text: '增量显示: 视频数(单位: 百万)',
      left: 'center',
      top: 0
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [0],
        type: 'line',
        areaStyle: {}
      }
    ]
  })

  const setUpVideoData = (tempdata, text, init = 0) => {
    let data = tempdata?.slice()
    let xArea = [] as Array<string>
    let yArea = [] as Array<number>
    let unit = '单位: 个'

    let unitdata = data[0].value
    console.log('我是参考值', unitdata)

    let flag
    if (unitdata < 1000) {
      flag = 1
    } else if (unitdata > 1000 && unitdata < 10000) {
      flag = 2
      unit = '单位: 千'
    } else if (unitdata > 10000 && unitdata < 10000000) {
      flag = 3
      unit = '单位: 万'
    } else if (unitdata > 10000000 && unitdata < 100000000) {
      flag = 4
      unit = '单位: 千万'
    } else {
      flag = 5
      unit = '单位: 亿'
    }

    data.reverse().forEach((item) => {
      if (flag === 1) {
        xArea.push(item.row)
        yArea.push(item.value)
      } else if (flag === 2) {
        xArea.push(item.row)
        yArea.push(item.value / 1000)
      } else if (flag === 3) {
        xArea.push(item.row)
        yArea.push(item.value / 10000)
      } else if (flag === 4) {
        xArea.push(item.row)
        yArea.push(item.value / 10000000)
      } else if (flag === 5) {
        xArea.push(item.row)
        yArea.push(item.value / 100000000)
      }
    })

    if (!init) {
      setOption({
        title: {
          text: `总量显示: ${text}(${unit})`,
          top: 0,
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: xArea
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yArea,
            type: 'line'
          }
        ]
      })
    } else {
      setOption_2({
        title: {
          text: `增量显示: ${text}(${unit})`,
          top: 0,
          left: 'center'
        },
        xAxis: {
          type: 'category',
          data: xArea
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yArea,
            type: 'line'
          }
        ]
      })
    }
  }

  useEffect(() => {
    if (props) {
      setDetail({
        view,
        subscribed,
        count
      })
    }
  }, [view, subscribed, count])

  useEffect(() => {
    let temp = totalData || {}

    if (Object.keys(temp).length === 0) {
      ;(async () => {
        if (id) {
          const {
            data: { data, errorCode, errorMessage }
          } = await getTagDetailHistory({
            id,
            type: 0
          })
          if (!errorCode) {
            const {
              history: { co }
            } = data
            setUpVideoData(co, '视频数')
            setTotalData(data)
          } else {
            Taro.atMessage({
              message: errorMessage + '，请充值',
              type: 'error'
            })
          }
        }
      })()
    }
    if (totalData) {
      const { history } = totalData
      switch (current) {
        case 0:
          setUpVideoData(history.co, '视频数')
          break
        case 1:
          setUpVideoData(history.v, '观看数')
          break
        case 2:
          setUpVideoData(history.r, '回复数')
          break
        case 3:
          setUpVideoData(history.c, '收藏数')
          break
        case 4:
          setUpVideoData(history.s, '分享数')
          break
        case 5:
          setUpVideoData(history.l, '点赞数')
          break
        default:
          break
      }
    }
  }, [id, current])

  useEffect(() => {
    let temp = totalData_2 || {}

    if (Object.keys(temp).length === 0) {
      ;(async () => {
        const {
          data: { data }
        } = await getTagDetailHistory({
          id,
          type: 1
        })
        const {
          history: { co }
        } = data
        setUpVideoData(co, '视频数', 1)
        setTotalData_2(data)
      })()
    }
    if (totalData_2) {
      const { history } = totalData_2
      switch (current_2) {
        case 0:
          setUpVideoData(history.co, '视频数', 1)
          break
        case 1:
          setUpVideoData(history.v, '观看数', 1)
          break
        case 2:
          setUpVideoData(history.r, '回复数', 1)
          break
        case 3:
          setUpVideoData(history.c, '收藏数', 1)
          break
        case 4:
          setUpVideoData(history.s, '分享数', 1)
          break
        case 5:
          setUpVideoData(history.l, '点赞数', 1)
          break
        default:
          break
      }
    }
  }, [id, current_2])

  const onInit = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, 'light', {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    })
    return chart // 必须return
  }

  return (
    <View className="data-wrap">
      <AtCard title="标签数据">
        <View className="text-wrap">
          <Text>播放量: {(detail?.view / 100000000).toFixed(2) + '亿'}</Text>
          <Text>订阅量: {detail?.subscribed}</Text>
          <Text>视频数: {detail?.count}</Text>
        </View>
      </AtCard>

      <View className="line-chart">
        <View className="tag-btn-wrap">
          <AtButton
            type="secondary"
            size="small"
            className={current === 0 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent(0)}
          >
            视频数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current === 1 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent(1)}
          >
            视频观看数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current === 2 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent(2)}
          >
            视频回复数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current === 3 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent(3)}
          >
            视频收藏数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current === 4 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent(4)}
          >
            视频分享数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current === 5 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent(5)}
          >
            视频点赞
          </AtButton>
        </View>
        {/* 通过 option 设置数据 */}
        <EChart echarts={echarts} option={option} onInit={onInit} />
      </View>
      <AtDivider height={150}></AtDivider>
      <View className="line-chart">
        <View className="tag-btn-wrap">
          <AtButton
            type="secondary"
            size="small"
            className={current_2 === 0 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent_2(0)}
          >
            视频数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current_2 === 1 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent_2(1)}
          >
            视频观看数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current_2 === 2 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent_2(2)}
          >
            视频回复数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current_2 === 3 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent_2(3)}
          >
            视频收藏数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current_2 === 4 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent_2(4)}
          >
            视频分享数
          </AtButton>
          <AtButton
            type="secondary"
            size="small"
            className={current_2 === 5 ? 'choose-btn' : 'scroll-btn'}
            onClick={() => setCurrent_2(5)}
          >
            视频点赞
          </AtButton>
        </View>
        {/* 通过 option 设置数据 */}
        <EChart echarts={echarts} option={option_2} onInit={onInit} />
      </View>
    </View>
  )
}
